<template>
    <div>
        <!-- 学习园地 -->
        <box-group-wrap pageTitle="学习园地" :isShowData="isShowData">
            <template slot="wrapBody">
                <!--<div class="learninggarden">-->
                    <!--<div class="learning">-->
                        <!--<div class="lear_title">-->
                            <!--<span>录音1:</span>-->
                        <!--</div>-->
                        <!--<div class="learContent">-->
                            <!--<div class="item">-->
                                <!--<span>工号</span>-->
                                <!--<p>{{ this.Good.agentId }}</p>-->
                            <!--</div>-->
                            <!--<div class="item">-->
                                <!--<span>业务类型</span>-->
                                <!--<p>{{ this.Good.busType }}</p>-->
                            <!--</div>-->
                            <!--<div v-if="Good.learningType==='0'" class="item">-->
                                <!--<span>学习类型</span>-->
                                <!--<p>品质事件</p>-->
                            <!--</div>-->
                            <!--<div v-else class="item">-->
                                <!--<span>学习类型</span>-->
                                <!--<p>优秀录音</p>-->
                            <!--</div>-->
                            <!--<div class="item">-->
                                <!--<span class="item_moen" @click="learningGardenMore(1)">播放</span>-->
                                <!--&lt;!&ndash;<p class="item_moen">详情</p>&ndash;&gt;-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="line"></div>-->
                    <!--<div class="learning">-->
                        <!--<div class="lear_title">-->
                            <!--<span>录音2:</span>-->
                        <!--</div>-->
                        <!--<div class="learContent">-->
                            <!--<div class="item">-->
                                <!--<span>工号</span>-->
                                <!--<p>{{ this.NoGood.agentId }}</p>-->
                            <!--</div>-->
                            <!--<div class="item">-->
                                <!--<span>业务类型</span>-->
                                <!--<p>{{ this.NoGood.busType }}</p>-->
                            <!--</div>-->
                            <!--<div v-if="NoGood.learningType==='0'" class="item">-->
                                <!--<span>学习类型</span>-->
                                <!--<p>品质事件</p>-->
                            <!--</div>-->
                            <!--<div v-else class="item">-->
                                <!--<span>学习类型</span>-->
                                <!--<p>优秀录音</p>-->
                            <!--</div>-->
                            <!--<div class="item">-->
                                <!--<span class="item_moen" @click="learningGardenMore(2)">播放</span>-->
                                <!--&lt;!&ndash;<p class="item_moen">详情</p>&ndash;&gt;-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
                <el-table :data="learningGardenData" style="width:100%" stripe border class="heard-bg">
                    <el-table-column label="工号" prop="agentId"></el-table-column>
                    <el-table-column label="业务类型" prop="busType"></el-table-column>
                    <el-table-column label="学习类型" prop="learningType">
                        <template slot-scope="scope">
                            <span>{{ scope.row.learningType ==='0' ? '品质事件' : '优秀录音'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    type="primary"
                                    icon="el-icon-caret-right"
                                    circle
                                    title="播放"
                                    @click="learningGardenMore(scope.row)"
                            />
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <!-- <template slot="wrapRight">
                <span class="marginmore" @click="memoMoreClick">更多>></span>
            </template>-->
        </box-group-wrap>
        <el-dialog
            v-drag
            :visible.sync="ShowGood"
            :close-on-click-modal="false"
            append-to-body
            center
            width="500px"
        >
            <div slot="title">播放</div>
            <el-form
                :model="Good"
                label-position="right"
                ref="Edit"
                label-width="110px"
                size="small"
            >
                <!--<el-form-item label="坐席工号" prop="agentId">-->
                    <!--<el-input v-model="Good.agentId" placeholder="请输入坐席工号" style="width: 250px" />-->
                <!--</el-form-item>-->
                <!--<el-form-item label="坐席姓名" prop="agentName">-->
                    <!--<el-input v-model="Good.agentName" placeholder="请输入坐席姓名" style="width: 250px" />-->
                <!--</el-form-item>-->
                <!--<el-form-item label="学习类型" prop="learningType">-->
                    <!--&lt;!&ndash;<el-input v-model="Edit.learningType" placeholder="请输入学习类型" style="width: 200px"/>&ndash;&gt;-->
                    <!--<el-radio label="1" v-model="Good.learningType" border>优秀录音</el-radio>-->
                    <!--<el-radio label="0" v-model="Good.learningType" border>品质事件</el-radio>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="业务类型" prop="busType">-->
                    <!--<el-input v-model="Good.busType" placeholder="请输入业务类型" style="width: 250px" />-->
                <!--</el-form-item>-->
                <el-form-item label="录音文件" prop="networkPath">
                    <!--<el-input v-model="Good.networkPath" placeholder="请输入"/>-->
                    <audio id="goodNetworkPath" :src="networkPath" controls="controls"></audio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="ShowGood = false" class="cancelBtn">关 闭</el-button>
            </div>
        </el-dialog>
        <el-dialog
            v-drag
            :visible.sync="ShowNoGood"
            :close-on-click-modal="false"
            append-to-body
            center
            width="500px"
        >
            <div slot="title">播放</div>
            <el-form
                :model="NoGood"
                label-position="right"
                ref="Edit"
                label-width="110px"
                size="small"
            >
                <!--<el-form-item label="坐席工号" prop="agentId">-->
                    <!--<el-input v-model="NoGood.agentId" placeholder="请输入坐席工号" style="width: 250px" />-->
                <!--</el-form-item>-->
                <!--<el-form-item label="坐席姓名" prop="agentName">-->
                    <!--<el-input-->
                        <!--v-model="NoGood.agentName"-->
                        <!--placeholder="请输入坐席姓名"-->
                        <!--style="width: 250px"-->
                    <!--/>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="学习类型" prop="learningType">-->
                    <!--&lt;!&ndash;<el-input v-model="Edit.learningType" placeholder="请输入学习类型" style="width: 200px"/>&ndash;&gt;-->
                    <!--<el-radio label="1" v-model="NoGood.learningType" border>优秀录音</el-radio>-->
                    <!--<el-radio label="0" v-model="NoGood.learningType" border>品质事件</el-radio>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="业务类型" prop="busType">-->
                    <!--<el-input v-model="NoGood.busType" placeholder="请输入业务类型" style="width: 250px" />-->
                <!--</el-form-item>-->
                <el-form-item label="录音文件" prop="networkPath">
                    <!--<el-input v-model="NoGood.networkPath" placeholder="请输入"/>-->
                    <audio id="noGoodNetworkPath" :src="NoGood.networkPath" controls="controls"></audio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="ShowNoGood = false" class="cancelBtn">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
// import { mapGetters } from 'vuex';
// import { isEmptyObject } from '@/utils/Object';
import BoxGroupWrap from '@/components/boxgroupwrap/BoxGroupWrap.vue';

export default {
    name: 'LearningGarden',
    data() {
        return {
            networkPath: '',
            learningGardenData: [],
            isShowData: true,
            ShowGood: false,
            ShowNoGood: false,
            Good: {
                agentId: '',
                agentName: '',
                learningType: '',
                busType: '',
                networkPath: '',
            },
            NoGood: {
                agentId: '',
                agentName: '',
                learningType: '',
                busType: '',
                networkPath: '',
            },
        }
    },
    components: { 'box-group-wrap': BoxGroupWrap, },
    mounted() {
        this.getDataInit();
    },
    methods: {
        getDataInit() {
            this.$post.learningGarden.getLearningGardenTop5()
                .then((res) => {
                    console.log("res:::::",res);
                    if (res.data.success) {
                        this.learningGardenData = res.data.content || [];
                        // this.Good.agentId = res.data.content.good.agentId;
                        // this.Good.agentName = res.data.content.good.agentName;
                        // this.Good.learningType = res.data.content.good.learningType;
                        // this.Good.busType = res.data.content.good.busType;
                        // this.Good.networkPath = res.data.content.good.networkPath;
                        // this.NoGood.agentId = res.data.content.noGood.agentId;
                        // this.NoGood.agentName = res.data.content.noGood.agentName;
                        // this.NoGood.learningType = res.data.content.noGood.learningType;
                        // this.NoGood.busType = res.data.content.noGood.busType;
                        // this.NoGood.networkPath = res.data.content.noGood.networkPath;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
        },
        // 查看详情
        learningGardenMore(row) {
            this.networkPath = row.networkPath;
            this.ShowGood = true;
            // if (flag === 1) {
            //     // this.$router.push('/information/learningGarden');
            //     this.ShowGood = true;
            // } else {
            //     // this.$router.push('/information/learningGarden');
            //     this.ShowNoGood = true;
            // }
        },
    },
}
</script>
<style scoped lang="scss">
.learninggarden {
    .learning {
        text-align: left;
        margin: 0 5px;
        font-size: 14px;
        .lear_title {
            font-weight: bold;
            line-height: 30px;
        }
    }
    .line {
        border-bottom: 1px solid #9ecfff !important;
    }
    .learContent {
        display: flex;

        .item {
            width: 33%;
            flex: 1;

            p,
            span {
                line-height: 24px;
            }
            .item_moen {
                margin-top: 30px;
                color: #0066cc;
                cursor: pointer;
            }
        }
    }
}
</style>